<template>
  <BackHeader :title="lang.rules_title" />
  <div class="rules_box">
    <p class="totalbet">{{ lang.rules_totalbet }}</p>
    <div class="list">
      <div class="list_box">
        <div class="th">
          <p>{{ lang.rules_rank }}</p>
          <p>{{ lang.rules_dia }}</p>
          <p>{{ lang.rules_sem }}</p>
        </div>
        <div class="tr">
          <div v-for="item in rankingRules" :key="item.rank" class="item">
            <p>{{ item.rank }}</p>
            <p>{{ item.dia }}</p>
            <p>{{ item.sem }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <p class="introduce_title">{{ lang.rules_introduce_title }}</p>
      <p class="introduce_text">{{ lang.rules_introduce_text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

// 排行榜规则数据
const rankingRules = [
  { rank: "1", dia: "10%", sem: "10%" },
  { rank: "2", dia: "6%", sem: "6%" },
  { rank: "3", dia: "4%", sem: "4%" },
  { rank: "4", dia: "2.97%", sem: "2.97%" },
  { rank: "5", dia: "2.34%", sem: "2.34%" },
  { rank: "6", dia: "1.92%", sem: "1.92%" },
  { rank: "7", dia: "1.62%", sem: "1.62%" },
  { rank: "8", dia: "1.42%", sem: "1.42%" },
  { rank: "9", dia: "1.3%", sem: "1.3%" },
  { rank: "10", dia: "1.23%", sem: "1.23%" },
  { rank: "11-20", dia: "10.45%", sem: "10.45%" },
  { rank: "21-50", dia: "18%", sem: "18%" },
  { rank: "51-100", dia: "12.25%", sem: "12.25%" },
  { rank: "101-200", dia: "14.5%", sem: "14.5%" },
  { rank: "201-300", dia: "7%", sem: "7%" },
  { rank: "301-400", dia: "3.5%", sem: "3.5%" },
  { rank: "401-500", dia: "1.5%", sem: "1.5%" },
];
</script>

<style scoped lang="scss">
.rules_box {
  height: 100%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 0.2rem;
  padding-top: 1.2rem;
  padding-bottom: 0.2rem;
  background: var(--theme-color3);
  color: var(--theme-neutral1);
  overflow-y: auto;
}

.totalbet {
  font-weight: 700;
  font-size: 0.38rem;
  margin: 0.3rem 0 0.2rem;
}

.list {
  .list_box {
    background: var(--theme-color9);
    border-radius: 0.3rem;
    padding: 0.4rem 0 0.2rem;
    font-size: 0.32rem;

    .th {
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;

      p {
        width: 100%;
      }
    }

    .tr {
      margin-top: 0.3rem;
    }

    .item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      height: 1rem;

      p {
        width: 100%;
        color: var(--theme-neutral2);
      }
    }
  }
}

.introduce {
  margin-top: 0.3rem;

  .introduce_title {
    font-family: Microsoft YaHei;
    font-weight: 700;
    font-size: 0.38rem;
    margin-bottom: 0.1rem;
  }

  .introduce_text {
    font-weight: 400;
    font-size: 0.28rem;
    line-height: 0.48rem;
    color: var(--theme-neutral2);
  }
}
</style>
